<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>备件管理系统 - 库存报表</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
<div id="app">
  <!-- 页面标题插槽 -->
  <h2 style="display: none;"><slot name="pageTitle">库存报表</slot></h2>

  <!-- 页面头部插槽 -->
  <header class="header" style="display: flex; flex-direction: column; align-items: flex-start;">
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
      <h2 style="margin: 0;">库存报表</h2>
      <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 10px;">
        <el-button type="info" size="small" @click="logout">退出</el-button>
        <el-input v-model="searchQuery" placeholder="请输入搜索内容" style="width: 300px;"></el-input>
      </div>
    </div>
  </header>

  <!-- 主体内容插槽 -->
  <main>
    <el-table :data="filteredInventoryReports" border style="width: 100%">
      <el-table-column prop="reportid" label="ID"></el-table-column>
      <el-table-column prop="sparepartid" label="备件ID"></el-table-column>
      <el-table-column prop="turnoverRate" label="周转率"></el-table-column>
      <el-table-column prop="occupiedFunds" label="占用资金"></el-table-column>
      <el-table-column prop="date" label="生成日期"></el-table-column>
    </el-table>
  </main>

  <!-- 引入 Vue + Axios + Element Plus -->
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-plus"></script>

<script>
  const { createApp } = Vue;
  const apiClient = axios.create({
    //本机地址
    //baseURL: 'http://localhost:8086',
    //服务器 地址
    baseURL: 'http://8.137.85.243:8086',
    timeout: 5000
  });

  const app = createApp({
    data() {
      return {
        inventoryReports: [],
        searchQuery: ''
      };
    },
    computed: {
      filteredInventoryReports() {
        if (!this.searchQuery) {
          return this.inventoryReports;
        }
        return this.inventoryReports.filter(item => 
          item.sparepartid.toString().includes(this.searchQuery)
        );
      }
    },
    mounted() {
      this.loadInventoryReports();
    },
    methods: {
      async loadInventoryReports() {
        const res = await apiClient.get('/api/inventoryreports/listall');
        this.inventoryReports = res.data;
      },
      logout() {
        window.location.href = '/operator.html';
      }
    }
  });

  app.use(ElementPlus);
  app.mount('#app');
</script>
</div>
</body>
</html>